<div class="todo-wrap">
  <header>Angular TodoList</header>
  <section>
    <div class="search-wrap">
      <input class="search-wrap__input" type="text" (keyup.enter)="onKeyUp($event)" [(ngModel)]="text" placeholder="add todo">
      <button class="search-wrap__btn" (click)="onClick()">添加</button>
    </div>

    <div class="list-wrap" >
      <div *ngIf="list.length > 0; then listEl else noDataEl">

      </div>
      <ng-template #listEl>
        <div class="list-item" *ngFor="let item of list; let i = index;">
          <span>
            <input type="checkbox" name="select" />
            {{ item.title }}
          </span>
          <button (click)="onDelete(item.id)">删除</button>
        </div>
      </ng-template>
      <ng-template #noDataEl>
        <div class="no-data">暂无数据</div>
      </ng-template>
    </div>
  </section>
</div>